<template>
  <div>
    <MainFrame menuIndex="ActivityList">
      <div slot='content'>
        <div class="top-title">
          活动详情
        </div>
        <div class="top-button">
          <el-button type="primary" @click="back">返回</el-button>
        </div>
        <ttForm v-model="form">
          <div slot="slot">
            <el-form-item label="活动内容">
              <editor id="editor_1" height="700px" width="100%" :content="form.items[10].value" pluginsPath="/static/kindeditor/plugins/" :loadStyleMode="false" @on-content-change="onContentChange" uploadJson="/toupiao/api/uploadEditorImg" filePostName="file" :items="toolbarItems"></editor>
            </el-form-item>
            <el-form-item label="活动规则">
              <editor id="editor_2" height="700px" width="100%" :content="form.items[11].value" pluginsPath="/static/kindeditor/plugins/" :loadStyleMode="false" @on-content-change="onRuleChange" uploadJson="/toupiao/api/uploadEditorImg" filePostName="file" :items="toolbarItems"></editor>
            </el-form-item>
          </div>
        </ttForm>
      </div>
    </MainFrame>
  </div>
</template>
<script>
import MainFrame from '@/components/MainFrame'
import utils from '../ttJs/utils.js'
import ttForm from '@/tt_components/ttForm'
export default {
  components: {
    MainFrame,
    ttForm
  },
  data() {
    var validator = (rule, value, callback) => {
      callback();
    };
    return {
      type: null,
      form: {
        id: null,
        url: '/toupiao/admin/submitActivity',
        items: [
          { name: 'title', value: '', label: '活动标题', placeholder: '请输入活动标题', type: 'input', rules: true, msg: '活动标题不能为空' },
          /*{ name: 'banner', value: '', label: 'Banner', placeholder: '请选择Banner', type: 'input' },*/
          { name: 'banner', value: '', imgUrl: '', label: 'Banner', type: 'img', url: '/toupiao/api/upload', index: 1, limit: 1 },
          { name: 'notification', value: '', label: '活动通知', placeholder: '请输入活动通知', type: 'input' },
          { name: 'endTime', value: '', label: '结束时间', placeholder: '请输入结束时间', type: 'datetime' },
          { name: 'votePerDay', value: '', label: '每天几票', placeholder: '请输入每人每天可以投几票', type: 'input' },
          { name: 'votePerShop', value: '', label: '每天几个商家', placeholder: '请输入每人每天可以投几个商家', type: 'input' },
          { name: 'votePerDiamond', value: '', label: '每钻几票', placeholder: '请输入每钻几票', type: 'input' },
          { name: 'shareTitle', value: '', label: '分享标题', placeholder: '请输入分享标题', type: 'input' },
          { name: 'shareDesc', value: '', label: '分享描述', placeholder: '请输入分享描述', type: 'input' },
          /*{ name: 'shareImage', value: '', label: '分享图片', placeholder: '请选择分享图片', type: 'input' },*/
          { name: 'shareImage', value: '', imgUrl: '', label: '分享图片', type: 'img', url: '/toupiao/api/upload', index: 9, limit: 1 },
          { name: 'content', value: '', type: 'slot' },
          { name: 'rule', value: '', type: 'slot' }
        ],
        rules: {
          title: [{ required: true, validator: validator, trigger: 'blur' }]
        }
      },
      toolbarItems: [
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
      ]
    };
  },
  mounted: function() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      var self = this;
      var id = self.$route.query.id
      self.type = self.$route.query.type
      if (utils.validateData(id)) {
        self.form.id = id;
        var url = '/toupiao/admin/activityInfo';
        var params = { id: id }
        var success = function(response) {
          var info = response.info;
          var items = self.form.items
          for (var index in items) {
            for (var key in info) {
              if (items[index].name == key) {
                if (items[index].type == 'img') {
                  if (utils.validateData(info[key])) {
                    items[index].imgUrl = info[key];
                  }
                }
                if (items[index].type == 'datetime') {
                  if (utils.validateData(info[key])) {
                    var year = info[key].split(" ")[0].split("-")[0];
                    var month = info[key].split(" ")[0].split("-")[1];
                    var day = info[key].split(" ")[0].split("-")[2];
                    var hour = info[key].split(" ")[1].split(":")[0];
                    var minute = info[key].split(" ")[1].split(":")[1];
                    var second = info[key].split(" ")[1].split(":")[2];
                    var datetime = new Date();
                    datetime.setFullYear(year);
                    datetime.setMonth(Number(month) - 1);
                    datetime.setDate(day);
                    datetime.setHours(hour);
                    datetime.setMinutes(minute);
                    datetime.setSeconds(second);
                    info[key] = datetime;
                  }
                }
                items[index].value = info[key]
              }
            }
          }
        }
        var fail = function() {
          utils.fail('加载失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
    },
    onContentChange(val) {
      this.form.items[10].value = val;
    },
    onRuleChange(val) {
      this.form.items[11].value = val;
    },
    back() {
      window.history.back();
    }
  }
};

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  margin: 0 0 20px 150px;
  font-size: 18px;
  font-weight: bold;
}

.top-button {
  margin: 0 0 20px 150px;
}

</style>
